<template>
    <view class="load" v-if="!load">
        <u-loading-icon mode="circle" inactive-color="#fff" text="正在加载..." vertical></u-loading-icon>
    </view>
    <view v-else>
        <block v-if="serverlist.length > 0">
            <view v-for="(item,index) in serverlist" :key="item.ID" class="contentbox" @click.stop="nav_to('/pages/teacher/course_details?id=' + item.ID + '&index=' + index+'&techid='+teID)">
            <image class="icon" :src="item.Images?item.Images.split(',')[0]:''"></image>
            <view class="titlebox">
              <view class="title">{{ $util.entitiesToUtf16(item.ProductName) }}</view>
              <view class="fee">{{ item.Price }}/小时</view>
            </view>
            <view class="reservabtn"
              @click="DeleteServer(item.ID)">
                删除服务
            </view>
            </view>
            <view style="height: 250rpx;"></view>
        </block>
        <block v-else>
            <u-empty mode="list" width="100" height="100"
			icon="https://wavestation.oss-cn-shenzhen.aliyuncs.com/upload/1720073678914285.png" :show="true" iconSize="32" text="暂无数据"></u-empty>
        </block>
        
        <uni-popup ref="serveBox" type="center">
      <view class="bottombox">
        <view class="group_2" @click.stop="showmotion = true">
          <view class="lab">{{ '运动项目' }}</view>
          <view class="inp_box">
            <input type="text" :value="fuwuData.Type" disabled placeholder="请选择" />
          </view>
          <view class="icon_box">
            <uni-icons type="right" size="20" color="#E7E7E7"></uni-icons>
          </view>
        </view>
        <view class="group_2">
          <view class="lab">{{ '项目名称' }}</view>
          <view class="inp_box">
            <input type="tel" v-model="fuwuData.ProductName" placeholder="请填写" maxlength="25" />
          </view>
        </view>
        <view class="group_2">
          <view class="lab">{{ '服务费用/小时' }}</view>
          <view class="inp_box">
            <input type="tel" v-model.number="fuwuData.Price" placeholder="请填写" maxlength="6" />
          </view>
        </view>
        <!-- <view class="group_textarea_2">
        <view class="lab">服务说明</view>
        <textarea style="width: 100%;height: 80%; font-weight: 400;margin-top: 20rpx;" :value="fuwuData.Description"
          placeholder="请填写说明" placeholder-class="remtext" @input.stop="inputrem" />
        <view class="count">{{ fuwuData.Description.length }} / {{ maxCount }}</view>
      </view> -->
        <view>
          <view class="classimg_list">
            <view class="title">{{ "课程主图" }}</view>
            <view class="img_box">
              <view class="img" v-for="(item, i) in classimg" :key="i">
                <image :src="item.tempUrl" mode="aspectFill"></image>
                <view class="icon" @click.stop="delclassimg(i)">
                  <image src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/1710154762492571.png" mode="">
                  </image>
                </view>
              </view>
              <!-- #ifdef MP-WEIXIN -->
              <view class="img addimg" @tap="classupload" v-if="classimg.length < 9">
                <image src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/17104950296621296.png" mode=""></image>
              </view>
              <!-- #endif -->
              <!-- #ifdef APP-PLUS -->
              <view class="img addimg" @tap="selectclass_APP" v-if="classimg.length < 9">
                <image src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/17104950296621296.png" mode=""></image>
              </view>
              <!-- #endif -->
            </view>
          </view>
          <view class="classtext">建议尺寸：414*316px，或同等比例</view>
        </view>
        <view class="classimg_list">
          <view class="title">{{ "课程详情图" }}</view>
          <view class="img_box">
            <view class="img" v-for="(item, i) in classdeimg" :key="i">
              <image :src="item.tempUrl" mode="aspectFill"></image>
              <view class="icon" @click.stop="delclassdeimg(i)">
                <image src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/1710154762492571.png" mode=""></image>
              </view>
            </view>
            <!-- #ifdef MP-WEIXIN -->
            <view class="img addimg" @tap="classdeupload" v-if="classdeimg.length < 9">
              <image src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/17104950296621296.png" mode=""></image>
            </view>
            <!-- #endif -->
            <!-- #ifdef APP-PLUS -->
            <view class="img addimg" @tap="selectclassde_APP" v-if="classdeimg.length < 9">
              <image src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/17104950296621296.png" mode=""></image>
            </view>
            <!-- #endif -->
          </view>
        </view>
        <view class="Eval" @click.stop="Eval">
          提交
        </view>
      </view>
    </uni-popup>
        
        <view class="bottombtn">
            <view class="subbtn" @click="openserve">添加</view>
        </view>
        <!-- 运动项目 -->
		<u-picker :show="showmotion" immediateChange @confirm="setmotion"  @cancel="showmotion = false"
		:columns="motiontype"></u-picker>
    </view>
</template>

<script>
export default {
components: {},
data() {
return {
    //教练服务
      fuwuData: {
        ProductName: '',
        Price: '',
        Description: '',
        Type: '',
        Images: '',
        ID: '',
      },
    classdeimg: [],//课程详情
    classimg: [], //课程主图
    teID:'',
    load:true,
    maxCount:200,
    isshow:false,
    serverlist:[],
    reqData:{
        ProductName:'',
        Price:'',
        Description:'',
        Type:''
    },
    //运动项目
	motiontype: [],
	showmotion: false,

    skilltype:[
        {
            value:'高尔夫',
            url:'https://wavestation.oss-cn-shenzhen.aliyuncs.com/upload/1720507637267166.png'
        },
        {
            value:'台球',
            url:'https://wavestation.oss-cn-shenzhen.aliyuncs.com/upload/1720507660024343.png',
        },
         {
            value:'羽毛球',
            url:'https://wavestation.oss-cn-shenzhen.aliyuncs.com/upload/1720507682039333.png',
        },
         {
            value:'网球',
            url:'https://wavestation.oss-cn-shenzhen.aliyuncs.com/upload/1720507704096875.png',
        },
         {
            value:'乒乓球',
            url:'https://wavestation.oss-cn-shenzhen.aliyuncs.com/upload/172050771589416.png',
        }
    ]
};
},
onLoad(e){
    this.teID = e.id
    this.teDetail()
    this.GetDictionary()
},
methods: {
    openserve(){
        this.$refs["serveBox"].open();
    },
    selectclassde_APP() {
      let sumlen = this.classdeimg.length
      let _this = this;
      uni.showActionSheet({
        itemList: ["选择照片", "取消"],
        success: function (res) {
          if (res.tapIndex == 0) {
            let ind = 1;
            uni.chooseImage({
              // count:  允许上传的照片数量
              count: 9 - sumlen,
              // sizeType:  original 原图，compressed 压缩图，默认二者都有
              sizeType: ["original", "compressed"],
              sourceType: ["album"],
              success(res) {
                console.log(res);
                res.tempFiles.forEach(async (item) => {
                  let o = {
                    duration: 0,
                    fileType: "image",
                    tempUrl: item.path,
                    flieUrl: item.path,
                    tempKey: uni.$u.guid(8),
                    pro: 0,
                  };

                  _this.classdeimg.push(o);

                let rex = await _this.classupdeloading(o.flieUrl, o.tempKey);
                });
              },
            });
            return;
          }
        },
        fail: function (res) { },
      });
    },
    //课程详情图
    classdeupload() {
      let sumlen = this.classdeimg.length
      let _this = this;
      uni.chooseMedia({
        count: 9 - sumlen,
        mediaType: ["image"],
        sourceType: ["album", "camera"],
        maxDuration: 30,
        camera: "back",
        success(res) {
          console.log(res);
          res.tempFiles.forEach(async (item) => {
            let o = {
              duration: 0,
              fileType: item.fileType,
              tempUrl: item.tempFilePath,
              flieUrl: item.tempFilePath,
              tempKey: uni.$u.guid(8),
              pro: 0,
            };

            _this.classdeimg.push(o);

            let rex = await _this.classupdeloading(o.flieUrl, o.tempKey);
            console.log("rex-------", rex);
          });
        },
      });
    },
    async classupdeloading(url, tempKey) {
      console.log("url ----------" + url);

      const r = await this.$upload(url, (pro) => {
        this.classdeimg.forEach((item) => {
          if (item.tempKey == tempKey) {
            item.pro = pro;
          }
        });
      });
      this.classdeimg.forEach((item) => {
        if (item.tempKey == tempKey) {
          item.netPath = r;
        }
      });

      console.log("upload file " + r);
    },
    //课程主图
    classupload() {
      let sumlen = this.classimg.length
      let _this = this;
      uni.chooseMedia({
        count: 9 - sumlen,
        mediaType: ["image"],
        sourceType: ["album", "camera"],
        maxDuration: 30,
        camera: "back",
        success(res) {
          console.log(res);
          res.tempFiles.forEach(async (item) => {
            let o = {
              duration: 0,
              fileType: item.fileType,
              tempUrl: item.tempFilePath,
              flieUrl: item.tempFilePath,
              tempKey: uni.$u.guid(8),
              pro: 0,
            };

            _this.classimg.push(o);

            let rex = await _this.classuploading(o.flieUrl, o.tempKey);
            console.log("rex-------", rex);
          });
        },
      });
    },
    //课程主图
    selectclass_APP() {
      let sumlen = this.classimg.length
      let _this = this;
      uni.showActionSheet({
        itemList: ["选择照片", "取消"],
        success: function (res) {
          if (res.tapIndex == 0) {
            let ind = 1;
            uni.chooseImage({
              // count:  允许上传的照片数量
              count: 9 - sumlen,
              // sizeType:  original 原图，compressed 压缩图，默认二者都有
              sizeType: ["original", "compressed"],
              sourceType: ["album"],
              success(res) {
                console.log(res);
                res.tempFiles.forEach(async (item) => {
                  let o = {
                    duration: 0,
                    fileType: "image",
                    tempUrl: item.path,
                    flieUrl: item.path,
                    tempKey: uni.$u.guid(8),
                    pro: 0,
                  };

                 _this.classimg.push(o);

                let rex = await _this.classuploading(o.flieUrl, o.tempKey);
                });
              },
            });
            return;
          }
        },
        fail: function (res) { },
      });
    },
    async classuploading(url, tempKey) {
      console.log("url ----------" + url);

      const r = await this.$upload(url, (pro) => {
        this.classimg.forEach((item) => {
          if (item.tempKey == tempKey) {
            item.pro = pro;
          }
        });
      });
      this.classimg.forEach((item) => {
        if (item.tempKey == tempKey) {
          item.netPath = r;
        }
      });

      console.log("upload file " + r);
    },
    delclassimg(i) {
      this.classimg.splice(i, 1);
    },
    delclassdeimg(i) {
      this.classdeimg.splice(i, 1);
    },
    async teDetail(){
        let res = await this.$api.post("Technicians/Detail", {
            ID: this.teID,
        });
        if(res.code == 0){
            this.serverlist = res.data.ServerList[0].ServerItemList
            this.load = true
        }
    },
    //删除服务
    async DeleteServer(id){
        let _this = this
        uni.showModal({
            title: "温馨提示",
            content: '您确定要删除该服务吗？',
            confirmText: "确定",
            success: async function (res) {
                if (res.confirm) {
                    let res1 = await _this.$api.post('Technicians/DeleteServerItem',{
                        ID:id,
                    })
                    if(res1.code == 0){
                        _this.$pv.msg('删除成功');
                        _this.teDetail()
                    }
                } else if (res.cancel) {
                }
            },
        });
    },
    inputrem(e) {
			const { value, cursor } = e.detail
			let str = this.$util.entitiesToUtf16(value)
			if (str.length > 200) {
				this.reqData.Description = str.slice(0, 200)
			} else {
				this.reqData.Description = str
			}

			// this.reqData.Remark
		},
    // async MyServer(){
    //     let res = await this.$api.post('Technicians/MyServer')
    //     if(res.code == 0){
    //         this.serverlist = res.data
    //         this.load = true
    //     }
    // },
    async GetDictionary(){
        let dic = await this.$api.post('Catalog/GetDictionary', {
			Type: 'SportType'
		});
        let tmp_dic = [];
        if(dic.code == 0){
            for (let i = 0; i < dic.data.length; i++) {
				tmp_dic.push(dic.data[i].Code)
			}
			this.motiontype.push(tmp_dic);
        }
    },
    async Eval() {
      if (!this.fuwuData.Type) {
        this.$pv.msg('请选择运动项目');
        return
      }
      if (!this.fuwuData.ProductName) {
        this.$pv.msg('请填写项目名称');
        return
      }
      if (!this.fuwuData.Price) {
        this.$pv.msg('请填写费用');
        return
      }
      if (!Number(this.fuwuData.Price)) {
        this.$pv.msg('请填写正确的数字');
        return
      }
      if (this.fuwuData.Price < 0) {
        this.$pv.msg('请填写费用必须大于0');
        return
      }
      if (this.classimg.length == 0) {
        this.$pv.msg('请至少选择一张课程主图');
        return
      }
      if (this.classdeimg.length == 0) {
        this.$pv.msg('请至少选择一张课程详情图');
        return
      }
      let classimglist = []
      for (let i = 0; i < this.classimg.length; i++) {
        classimglist.push(this.classimg[i].netPath);
      }
      let classstring = classimglist.join(",");
      this.fuwuData.Images = classstring
      let classdeimglist = []
      for (let i = 0; i < this.classdeimg.length; i++) {
        classdeimglist.push(this.classdeimg[i].netPath);
      }
      let classsdetring = classdeimglist.join(",");
      this.fuwuData.Description = classsdetring
      let data = JSON.parse(JSON.stringify(this.fuwuData))
      let proString = this.$util.utf16ToEntities(data.ProductName)
      data.ProductName = proString
      let _this = this
      uni.showModal({
        title: "温馨提示",
        content: '您确定要添加该服务吗？',
        confirmText: "确定",
        success: async function (res) {
          if (res.confirm) {
            let res1 = await _this.$api.post('Technicians/AddServerItem', data)
            if (res1.code == 0) {
              _this.$pv.msg('添加成功');
              _this.fuwuData.ProductName = '',
                _this.fuwuData.Type = ''
              _this.fuwuData.Price = '',
                _this.fuwuData.Description = ''
              _this.fuwuData.Images = ''
              _this.classimg = []
              _this.classdeimg = []
              _this.teDetail()
              _this.$refs["serveBox"].close();
            }
          } else if (res.cancel) {
          }
        },
      });
    },
    setmotion(e) {
        console.log(e,'111');
        this.fuwuData.ProductName = e.value[0];
        this.fuwuData.Type = e.value[0]
        // let isindex = this.serverlist.some((item,index)=>{
        //     return e.value[0] == item.ProductName
        // })
        // if(!isindex){
        //     this.reqData.ProductName = e.value[0];
        //     this.reqData.Type = e.value[0]
        // }else{
        //     this.$pv.msg('你已添加过此项目，请重新选择');
        // }
		
        
		this.showmotion = false;
	},
},
}
</script>
<style lang='scss'>
page{
    background-color: #f6f6f6;
}
.shadow{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100vh;
    // background-color: rgba(0,0,0,0.5);
    z-index: 2;
}
.maskBox{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100vh;
    background-color: rgba(0,0,0,0.5);
}
.bottombox {
  width: 96vw;
  margin: 0 auto;
  background-color: #fff;
  padding: 0 32rpx 30rpx 34rpx;
  box-sizing: border-box;
  height: fit-content;
  border-radius: 18rpx;
}
    .bottombox .group:last-child{
        border-bottom: none;
    }
.group {
	display: flex;
	align-items: center;
	height: 104rpx;
	border-bottom: 1rpx solid #E4E4E4;
	&:last-child {
		border-bottom: none;
	}
	.text5{
			font-size: 28rpx;
			font-weight: 500;
			color: #333333;
		}
		.text6{
			font-size: 28rpx;
			font-weight: 500;
			color: #C2C2C2;
		}
		.unit{
			color: #333333;
			font-weight: 500;
			font-size: 28rpx;
			padding-right: 10rpx;
			margin-right: 10rpx;
		}
	.lab {
		padding-right: 10rpx;
		color: #333333;
		font-size: 32rpx;
		font-weight: 500;
	}

	.inp_box {
		flex: 1;
		input {
			width: 100%;
			color: #333333;
			text-align: right;
			font-weight: 500;
		}
	}

	.icon_box {
		height: 40rpx;
		width: 40rpx;
		line-height: 40rpx;
	}
}
.bottombtn{
    width: 100%;
    height: 196rpx;
    background-color: #fff;
    position: fixed;
    bottom: 0;
    .subbtn{
        width: 670rpx;
        height: 88rpx;
        background: #706EEE;
        border-radius: 44rpx;
        text-align: center;
        line-height: 88rpx;
        color: #fff;
        font-size: 32rpx;
        font-weight: bold;
        margin: 20rpx auto;
    }
}
.group_textarea {
	height: 264rpx;
	margin-top: 30rpx;
	// background-color: #fff;
	// padding-left: 32rpx;
	// text-indent: 2em;
	box-sizing: border-box;
	position: relative;
    .lab {
		padding-right: 10rpx;
		color: #333333;
		font-size: 32rpx;
		font-weight: 500;
	}
	.count {
		position: absolute;
		bottom: 15rpx;
		right: 15rpx;
		font-size: 24rpx;
		color: #C2C2C2;
	}
	/deep/ .u-textarea {
		background: none !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
		border-bottom: none !important;
		padding: 0 !important;
		height: 100% !important;
		text-indent: 2em;
	}

	/deep/ .u-textarea__count {
		background: none !important;
		color: #0d0d0d !important;
	}

	/deep/ .u-textarea__field {
		color: #0d0d0d !important;
		font-size: 28rpx !important;
		height: 100% !important;
	}
}
.Eval{
        width: 400rpx;
        height: 88rpx;
        background: #706EEE;
        border-radius: 44rpx;
        text-align: center;
        line-height: 88rpx;
        color: #fff;
        font-size: 32rpx;
        font-weight: bold;
        margin: 20rpx auto;
}

  .contentbox {
    display: flex;
    align-items: center;
    padding: 32rpx;
    box-sizing: border-box;
    margin-bottom: 24rpx;
    border-radius: 16rpx;
    background: #FFFFFF;
    box-shadow: 0rpx 0rpx 16rpx 0rpx rgba(0, 0, 0, 0.08);
    margin-top: 32rpx;
    .icon {
      width: 112rpx;
      min-width: 112rpx;
      height: 112rpx;
    //   background-color: yellowgreen;
      margin-right: 32rpx;
      border-radius: 18rpx;
    }

    .titlebox {
      margin-right: auto;

      .title {
        font-size: 32rpx;
        font-weight: bold;
        color: #333333;
      }

      .fee {
        font-size: 32rpx;
        font-weight: 500;
        color: #FC201C;
        margin-top: 12rpx;
      }
    }

    .reservabtn {
      width: 182rpx;
      min-width: 182rpx;
      height: 64rpx;
      background: #706EEE;
      border-radius: 32rpx;
      text-align: center;
      line-height: 64rpx;
      color: #fff;
      font-size: 28rpx;
    }
  }
.group_2 {
  display: flex;
  align-items: center;
  height: 104rpx;
  border-bottom: 1rpx solid #E4E4E4;

  &:last-child {
    border-bottom: none;
  }

  .text5 {
    font-size: 28rpx;
    font-weight: 500;
    color: #333333;
  }

  .text6 {
    font-size: 28rpx;
    font-weight: 500;
    color: #C2C2C2;
  }

  .unit {
    color: #333333;
    font-weight: 500;
    font-size: 28rpx;
    padding-right: 10rpx;
    margin-right: 10rpx;
  }

  .lab {
    padding-right: 10rpx;
    color: #333333;
    font-size: 32rpx;
    font-weight: 500;
  }

  .inp_box {
    flex: 1;

    input {
      width: 100%;
      color: #333333;
      text-align: right;
      font-weight: 500;
    }
  }

  .icon_box {
    height: 40rpx;
    width: 40rpx;
    line-height: 40rpx;
  }
}
.classimg_list {
  // width: 96vw;
  border-radius: 18rpx;
  padding: 25rpx 25rpx;
  border-top: 1rpx solid #e4e4e4;
  box-sizing: border-box;
  height: fit-content;
  max-height: 1300rpx;
  background-color: #fff;
  margin: 0 auto;
  // padding: 26rpx 32rpx;
  .title {
    font-size: 30rpx;
  }

  image {
    width: 100%;
    height: 100%;
  }

  .img_box {
    display: flex;
    align-items: center;
    // justify-content: space-evenly;
    flex-wrap: wrap;
    overflow-y: auto;
    max-height: 800rpx;
  }

  .videobox {
    padding: 32rpx;
    position: relative;

    >view {
      width: 100%;
      height: 300rpx;
      border-radius: 16rpx;
      overflow: hidden;

      video {
        width: 100%;
        height: 100%;
      }
    }

    .icon {
      position: absolute;
      right: 10rpx;
      top: 10rpx;
      width: 50rpx;
      height: 50rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      // border-radius: 50%;
      z-index: 10;

      image {
        width: 40rpx;
        height: 40rpx;
        background: #fff;
        border-radius: 50%;
      }
    }
  }

  .img {
    // width: 220rpx;
    // height: 300rpx;
    width: 100rpx;
    height: 120rpx;
    border-radius: 8rpx;
    margin-right: 16rpx;
    margin-top: 16rpx;
    // overflow: hidden;
    position: relative;

    image {
      border-radius: 8rpx;
    }

    .icon {
      position: absolute;
      right: -20rpx;
      top: -14rpx;
      width: 50rpx;
      height: 50rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      // border-radius: 50%;
      z-index: 10;

      image {
        width: 40rpx;
        height: 40rpx;
        background: #fff;
        border-radius: 50%;
      }
    }
  }

  // .img:nth-child(3n) {
  //   margin-right: 0;
  // }

  .addimg {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f6f6f6;

    image {
      width: 80rpx;
      height: 80rpx;
    }
  }
}
</style>